<template>
  <div>
    <!-- 查询条件 -->
    <a-row type="flex" justify="space-between" align="middle">
      <div class="flex justify-between">
        <a-input
          class="search-input"
          v-model="roleName"
          placeholder="请输入角色名称"
          allow-clear
        />
        <u-button
          @click="
            current = 1;
            search();
          "
          >查询
        </u-button>
      </div>
      <a-col :span="3" class="flex flex-end">
        <u-button type="primary" icon="btn-add" @click="add">
          新增角色
        </u-button>
      </a-col>
    </a-row>
    <!-- 表格和分页 -->
    <a-table
      :columns="columns"
      :data-source="data"
      size="small"
      :pagination="false"
      :loading="loading"
      style="margin-top: 10px"
    >
      <span slot="action" slot-scope="text">
        <div class="flex-start" v-if="text.roleType == 2">
          <div class="mr-10" @click="divideBtn(text.roleId)">
            <a-icon class="button-icon" type="read" style="color: #1890ff" />
            <span class="button-text">分配权限</span>
          </div>
          <div class="mr-10" @click="edit(text)">
            <a-icon class="button-icon" type="edit" style="color: #1890ff" />
            <span class="button-text">编辑</span>
          </div>
          <div @click="onRemove(text)">
            <a-icon class="button-icon" type="delete" style="color: #1890ff" />
            <span class="button-text">删除</span>
          </div>
        </div>
      </span>
    </a-table>
    <Pagination
      :total="total"
      :defaultPage="page"
      :defaultCurrent="current"
      @sizeChange="
        (val) => {
          page = val;
          current = 1;
          search();
        }
      "
      @currentChange="currentChange"
    />
    <!-- 新增编辑弹窗 -->
    <a-modal
      :maskClosable="false"
      :keyboard="false"
      :title="title"
      :visible="visible"
      :footer="null"
      centered
      :width="600"
      @cancel="visible = false"
    >
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        labelAlign="left"
        layout="horizontal"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-form-model-item label="名称:" prop="roleName" style="width: 100%">
          <a-input
            v-model="form.roleName"
            placeholder="请输入角色，名称最多输入32个字符"
            :maxLength="32"
          />
        </a-form-model-item>
        <a-form-model-item prop="description" label="描述:" style="width: 100%">
          <a-textarea
            v-model="form.description"
            :maxLength="255"
            placeholder="请输入描述，最多输入255个字符"
          />
        </a-form-model-item>
      </a-form-model>
      <div class="flex flex-end mt-10">
        <u-button
          type="default"
          style="font-weight: bold"
          @click="visible = false"
          >取消</u-button
        >
        <u-button class="ml-10 btn-default btn-confirm" @click="confirm">
          确定
        </u-button>
      </div>
    </a-modal>

    <a-modal
      :maskClosable="false"
      :keyboard="false"
      class="role-modal"
      title="分配权限"
      v-if="divideVisible"
      :visible="divideVisible"
      :footer="null"
      centered
      :width="600"
      @cancel="divideVisible = false"
    >
      <div class="role-header">
        <span>请为当前角色分配权限：</span>
        <u-button type="primary" icon="send" ghost @click="confirmDivide"
          >保存</u-button
        >
      </div>
      <div class="role-tree-wrap">
        <role-tree v-model="treeData" />
      </div>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  // {
  //   title: "序号",
  //   width: 70,
  //
  //   customRender: (text, record, index) => `${index + 1}`,
  // },
  {
    title: "角色名称",
    dataIndex: "roleName",
  },
  {
    title: "描述",
    dataIndex: "description",
  },
  {
    title: "创建时间",
    dataIndex: "createdTime",
  },
  {
    title: "操作",
    width: "240px",
    scopedSlots: { customRender: "action" },
  },
];
import Pagination from "@/components/Pagination.vue";
import {
  addSystemRole,
  configRolePermission,
  deleteRole,
  getSystemRoleList,
  updateSystemRole,
} from "@/api/role";
import RoleTree from "./components/role-tree.vue";
import { getRolePermissionList } from "@/api/permission";
import { flatPermission } from "@/api/mock/mock";
export default {
  components: {
    Pagination,
    RoleTree,
  },
  data() {
    return {
      // query
      columns,
      loading: false,
      data: [],
      roleName: "",
      page: 10,
      current: 1,
      total: 0,
      // add edit
      visible: false,
      title: "新增角色",
      form: {
        roleName: null,
        description: null,
      },
      rules: {
        roleName: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "change",
          },
          {
            max: 32,
            message: "名称最多输入32个字符",
            trigger: "change",
          },
        ],
      },
      // 分配权限
      divideVisible: false,
      treeData: [],
      roleId: null,
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    async search() {
      this.loading = true;
      await this.getList();
      this.loading = false;
    },
    add() {
      this.title = "新增角色";
      this.visible = true;
      this.roleId = null;
      this.form = {
        roleName: null,
        description: null,
      };
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
    },
    edit(text) {
      this.roleId = text.roleId;
      const { roleName, description } = text;
      this.form = {
        roleName,
        description,
      };

      this.title = "编辑角色";
      this.visible = true;
    },

    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.roleId) {
            const form = JSON.parse(JSON.stringify(this.form));
            updateSystemRole({ ...form, roleId: this.roleId }).then(() => {
              this.$message.success("编辑成功");
              this.search();
              this.visible = false;
            });
          } else {
            const form = JSON.parse(JSON.stringify(this.form));
            addSystemRole(form).then(() => {
              this.$message.success("新增成功");
              this.search();
              this.visible = false;
            });
          }
        } else {
          return false;
        }
      });
    },
    // 分配权限
    divideBtn(roleId) {
      this.roleId = roleId;
      this.divideVisible = true;
      getRolePermissionList(roleId).then((res) => {
        if (res.code === 200) {
          this.treeData = flatPermission(res.data).map((v) => v.permissionId);
        }
      });
    },
    confirmDivide() {
      configRolePermission({
        roleId: this.roleId,
        permissionIdList: this.treeData,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("分配成功");
          this.divideVisible = false;
        }
      });
    },
    // 列表
    getList() {
      return getSystemRoleList(
        {
          page_index: this.current,
          page_size: this.page,
        },
        {
          roleName: this.roleName,
        }
      ).then((res) => {
        this.total = res.data.total;
        this.data = res.data.systemRole;
      });
    },
    currentChange(val) {
      this.current = val;
      this.search();
    },
    // 删除
    onRemove(text) {
      const _this = this;
      this.$confirm({
        title: `提示`,
        content: `此操作将永久删除该数据，是否继续？`,
        onOk() {
          deleteRole(text.roleId).then(() => {
            _this.$message.success("已删除");
            _this.current = 1;
            _this.search();
          });
        },
        onCancel() {
          _this.$message.info("已取消删除");
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.role-header {
  padding: 0 24px 15px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.role-header {
  .ant-btn-background-ghost.ant-btn-primary {
    background-color: #bfd8f6 !important;
  }
}

.role-tree-wrap {
  padding: 15px 24px 0;
  min-height: 400px;
  max-height: 500px;
  overflow-y: scroll;
}
</style>

<style lang="scss">
.role-modal {
  .ant-modal-body {
    padding: 15px 0 24px;
  }
}
</style>
